<template>
  <div class="container" v-loading="loading">
    <div class="nav_l">
      <div class="search_bar">
        <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="sea_GroupName"
          @input="getSeaGroupList"
          clearable
        >
        </el-input>
      </div>
      <div class="groupList">
        <div v-if="sea_GroupName==''">
          <div v-if="schoolGroupList.length!==0">
            <div class="grouptitle">学校群组</div>
            <div v-for="(item) in schoolGroupList">
              <div :class="groupId==item.groupId?'group_item active':'group_item'" @click="handleNodeClick(item)">
                <div class="item_basic">
                  <div class="item_img" v-if="!item.groupAvatar"><img src="@/assets/image_library/GroupDefault.png"/>
                  </div>
                  <div class="item_img" v-else><img :src="item.groupAvatar"/></div>
                  <div class="groupMsg"><span class="groupName">{{ item.groupName }}</span><span>（{{
                      item.memberNum
                    }}人）</span></div>
                </div>
                <div class="msgNum" v-if="item.unreadNum>0">{{ item.unreadNum }}</div>
              </div>
            </div>
          </div>
          <div v-if="branchGroupList.length!==0">
            <div class="grouptitle">分院群组</div>
            <div v-for="(item) in branchGroupList">
              <div :class="groupId==item.groupId?'group_item active':'group_item'" @click="handleNodeClick(item)">
                <div class="item_basic">
                  <div class="item_img" v-if="!item.groupAvatar"><img src="@/assets/image_library/GroupDefault.png"/>
                  </div>
                  <div class="item_img" v-else><img :src="item.groupAvatar"/></div>
                  <div class="groupMsg"><span class="groupName">{{ item.groupName }}</span><span>（{{
                      item.memberNum
                    }}人）</span></div>
                </div>
                <div class="msgNum" v-if="item.unreadNum>0">{{ item.unreadNum }}</div>
              </div>
            </div>
          </div>
          <div v-if="disciplineGroupList.length!==0">
            <div class="grouptitle">学科专业组</div>
            <div v-for="(item) in disciplineGroupList">
              <div :class="groupId==item.groupId?'group_item active':'group_item'" @click="handleNodeClick(item)">
                <div class="item_basic">
                  <div class="item_img" v-if="!item.groupAvatar"><img src="@/assets/image_library/GroupDefault.png"/>
                  </div>
                  <div class="item_img" v-else><img :src="item.groupAvatar"/></div>
                  <div class="groupMsg"><span class="groupName">{{ item.groupName }}</span><span>（{{
                      item.memberNum
                    }}人）</span></div>
                </div>
                <div class="msgNum" v-if="item.unreadNum>0">{{ item.unreadNum }}</div>
              </div>
            </div>
          </div>
          <div v-if="myGroupList.length!==0">
            <div class="grouptitle">我的群组</div>
            <div v-for="(item) in myGroupList">
              <div :class="groupId==item.groupId?'group_item active':'group_item'" @click="handleNodeClick(item)">
                <div class="item_basic">
                  <div class="item_img" v-if="!item.groupAvatar"><img src="@/assets/image_library/GroupDefault.png"/>
                  </div>
                  <div class="item_img" v-else><img :src="item.groupAvatar"/></div>
                  <div class="groupMsg"><span class="groupName">{{ item.groupName }}</span><span>（{{
                      item.memberNum
                    }}人）</span></div>
                </div>
                <div class="msgNum" v-if="item.unreadNum>0">{{ item.unreadNum }}</div>
              </div>
            </div>
          </div>
        </div>
        <div v-else>
          <div v-for="(item) in groupList">
            <div :class="groupId==item.groupId?'group_item active':'group_item'" @click="handleNodeClick(item)">
              <div class="item_basic">
                <div class="item_img" v-if="!item.groupAvatar"><img src="@/assets/image_library/GroupDefault.png"/>
                </div>
                <div class="item_img" v-else><img :src="item.groupAvatar"/></div>
                <div class="groupMsg"><span class="groupName">{{ item.groupName }}</span><span>（{{
                    item.memberNum
                  }}人）</span></div>
              </div>
              <div class="msgNum" v-if="item.unreadNum>0">{{ item.unreadNum }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="addBtns" @click="buildGroup('build')">
        <div>
          <img src="@/assets/image_library/addGroup.png"/>
        </div>
        <div>创建群组</div>
      </div>
    </div>
    <div class="content_r" v-if="!groupId">

    </div>
    <div class="content_r" v-else>
      <div class="content_top">
        <div class="top_one">
          <div>
            <span>群存储（{{ groupDetailMsg.storageSize }}/{{
                groupDetailMsg.totalStorageSize || 0
              }}GB）</span>
            <span class="uploadBtn" v-if="groupInfo.isAllowUpload||isAdmin||isGroupowner">
              <el-dropdown trigger="click" @command="uploadGroupFile">
                 <span class="el-dropdown-link">
                  <i class="el-icon-upload2"></i>
                    上传文件<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="{map:1}">本地文件</el-dropdown-item>
                <el-dropdown-item :command="{map:2}">我的文件</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            </span>
            <el-button icon="el-icon-circle-plus-outline" size="mini" v-if="isAdmin||isGroupowner" @click="addFiles"
                       round
            >
              新建文件夹
            </el-button>
            <el-button icon="el-icon-user" size="mini" v-if="isInvite||isAdmin||isGroupowner"
                       @click="buildGroup('invite')"
                       round
            >邀请成员
            </el-button>
            <el-button icon="el-icon-setting" size="mini" v-if="isAdmin||isGroupowner"
                       @click="openGroupadmin" round
            >群管理

            </el-button>
          </div>
          <div>
            <el-input
              placeholder="请输入内容"
              prefix-icon="el-icon-search"
              clearable
              style="width: 300px;"
              v-model="search_text"
              @input="searchFiles"
            >
            </el-input>
          </div>
        </div>
        <div class="top_two">
          <div v-if="search_text==''">
            <span v-for="(item,index) in pathArr">
              <span v-if="index==0" @click="brandClick(0,index)">
                群文件
              </span>
               <span v-if="index==0&&isPathLength">   <i class="el-icon-arrow-right"></i> ...</span>
              <span v-if="index>0&&(!isPathLength||pathArr.length-index<=3)" @click="brandClick(item.id,index)">
                <span>
                  <i class="el-icon-arrow-right"></i>
                </span> {{ item.fileName }}</span>
            </span>
          </div>
          <div v-if="search_text!=''">
            <span>
              <span @click="searchBand()">
                群文件
              </span>
              <span>
                <span>
                  <i class="el-icon-arrow-right"></i>
                </span> {{ `"${search_text}"的搜索结果` }}</span>
            </span>
          </div>
        </div>
        <div class="top_three">
          <div>
            <el-button type="primary" size="mini" @click="checkAllItem">{{ checkAll ? '取消全选' : '全选' }}</el-button>
            <el-dropdown trigger="click" @command="handelCopy"
                         v-if="(checkList.length!=0||checkAll)&&(isAdmin||isGroupowner)"
            >
              <el-button type="primary" size="mini">
                复制到<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="{map:1}">群文件</el-dropdown-item>
                <el-dropdown-item :command="{map:2}">我的文件</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-button type="primary" size="mini" @click="handelCopy({map:2})"
                       v-if="(checkList.length!=0||checkAll)&&(!isAdmin&&!isGroupowner)"
            >
              复制到
            </el-button>
            <el-button type="primary" size="mini" v-if="(checkList.length!=0||checkAll)&&(isAdmin||isGroupowner)"
                       @click="handelMove('move')"
            >移动到
            </el-button>
            <el-button type="danger" size="mini" v-if="(checkList.length!=0||checkAll)&&(isAdmin||isGroupowner)"
                       @click="deleteByID"
            >删除
            </el-button>
          </div>
          <div class="iconBtn">
            <div class="refreshList">
              <i class="el-icon-refresh-right" @click="getFilesList(pathArr[pathArr.length-1].id,groupId)"></i>
            </div>
            <el-dropdown :hide-on-click="false">
             <span class="el-dropdown-link">
              <img src="@/assets/image_library/filterIcon.png" class="filterIcon"/>
             </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item disabled>规则排序</el-dropdown-item>
                <el-dropdown-item>
                  <el-radio v-model="sortType" label="1">文件名称</el-radio>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-radio v-model="sortType" label="2">创建时间</el-radio>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-radio v-model="sortType" label="3">修改时间</el-radio>
                </el-dropdown-item>
                <el-dropdown-item divided disabled>排序</el-dropdown-item>
                <el-dropdown-item>
                  <el-radio v-model="orderType" label="1" v-if="sortType==='1'">名称从A到Z</el-radio>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-radio v-model="orderType" label="2" v-if="sortType==='1'">名称从Z到A</el-radio>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-radio v-model="orderType" label="2" v-if="sortType!=='1'">时间从近到远</el-radio>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-radio v-model="orderType" label="1" v-if="sortType!=='1'">时间从远到近</el-radio>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
      <div class="filecontnet" v-loading="isloading">
        <el-empty :description="search_text!==''?'群文件中并未找到相关文件':'暂无数据'"
                  v-if="files.length==0&&!isloading" class="empty"
                  :image="require('@/assets/image_library/nodata.png')"
        ></el-empty>
        <!--        <el-empty description="暂无数据" v-if="files.length==0" class="empty"></el-empty>-->
        <FileList
          ref="files"
          v-model="checkAll"
          v-if="files.length!=0"
          :fileType="0"
          :fileList="files"
          :groupId="groupId"
          map="group"
          :isAdmin="isAdmin"
          :isGroupowner="isGroupowner"
          @checklist="getchecklist"
          @nextInto="nextInto"
          @lookMore="loadMoreData"
          @isEdit="getEditFile"
        ></FileList>
      </div>

      <div class="content_footer">
        <div>
          <span class="footer_left">{{ files.length }}个项目</span>
          <span>已选择 <span class="check_num">{{ checkList.length }}</span> 个项目</span>
        </div>
        <div class="getOutgroup" @click="getoutGroup"> 退出群组</div>
      </div>
    </div>
    <!--  群聊管理-->
    <Groupadmin ref="groupadmin" @refreshavatar="getGroupList()"></Groupadmin>
    <!--创建群聊-->
    <Buildgroup ref="buildGroup"></Buildgroup>
    <!--    移动复制-->
    <MoveDialog ref="moveDialog"></MoveDialog>
    <!--    从我的文件上传-->
    <Uploadfromlibrary ref="uploadfromlibrary"></Uploadfromlibrary>
    <!--    转让-->
    <TransferGroup ref="transferGroup"></TransferGroup>
    <!--    上传-->
    <UploadInput map="group" :groupId="groupId" @refreshList="finishUpload" ref="uploadInput"></UploadInput>
  </div>
</template>

<script>
import Buildgroup from '@/views/library_groupPage/component/buildGroup.vue'
import Groupadmin from '@/views/library_groupPage/component/groupAdmin.vue'
import FileList from '@/views/library_homePage/component/FileList.vue'
import {
  getGroupFileList,
  getGroupList,
  getmyGroup,
  GroupbatchDeleteFile,
  SearchGroupFileList, getGroupUserInfo, getGroupDetail, leaveGroup
} from '@/api/library_groupList/groupList'
import { mapGetters, mapMutations } from 'vuex'
import MoveDialog from '@/views/library_homePage/component/moveDialog.vue'
import Uploadfromlibrary from '@/views/library_homePage/component/Uploadfromlibrary.vue'
import TransferGroup from '@/views/library_groupPage/component/transferGroup.vue'
// 上传组件
import UploadInput from '@/components/library_upload/index.vue'
import { convertBytes } from '@/views/library_homePage/utils/files'

export default {
  name: 'groupPage',
  components: { TransferGroup, FileList, Buildgroup, Groupadmin, MoveDialog, Uploadfromlibrary, UploadInput },
  computed: {
    ...mapGetters('libraryFile', ['pathArr']),
// 计算路径字符数是否超过64
    isPathLength() {
      let num = 3
      console.log(this.pathArr)
      this.pathArr.forEach((item, index) => {
        if (index !== 0) {
          num += item.fileName.length
        }
      })
      return num > 64
    }
  },
  data() {
    return {
      groupList: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      search_group: '',
      drawer: false,
      search_text: '',
      checkAll: false,
      activeInfo: {},
      // 是否允许上传
      isCanfile: true,
      // 是否管理员
      isAdmin: false,
      // 是否群主
      isGroupowner: false,
      // 是否允许邀请
      isInvite: false,
      isEdit: false,
      uploadType: '',
      files: [],
      checkList: [],
      schoolGroupList: [],
      branchGroupList: [],
      myGroupList: [],
      disciplineGroupList: [],
      sea_GroupName: '',
      groupId: void 0,
      loading: false,
      groupInfo: {},
      groupDetailMsg: {},
      sortType: '3',
      orderType: '2',
      pageNum: 1,
      pageSize: 100,
      total: 0,
      isloading: true,
      convertBytes: function(num) {
        return convertBytes(num)
      }

    }
  },
  mounted() {
    this.loading = true
    this.clearPathArr()
    this.getGroupList()
  },
  watch: {
    sortType() {
      this.searchFiles()
    },
    orderType() {
      this.searchFiles()
    }
  },
  methods: {
    ...mapMutations('libraryFile', ['removePath', 'clearPathArr']),
    finishUpload() {
      this.getFilesList(this.pathArr[this.pathArr.length - 1].id, this.groupId)
      this.getGroupDetailMsg()
    },
    loadMoreData() {
      if (this.total > this.files.length) {
        this.pageNum++
        if (this.search_text == '') {
          this.getFilesList(this.pathArr[this.pathArr.length - 1].id, this.groupId)
        } else {
        }
      } else {
        console.log('没有更多了')
      }
    },
    handleNodeClick(data) {
      this.pageNum = 1
      this.groupId = data.groupId
      this.activeInfo = data
      this.getFilesList(0, data.groupId)
      this.getRoleInfo()
      this.getGroupDetailMsg()
      this.clearPathArr()
    },
    buildGroup(type) {
      this.$refs.buildGroup.show(type, this.groupId)
    },
    openGroupadmin() {
      this.$refs.groupadmin.show(this.isAdmin, this.isGroupowner, this.groupId)
    },
    // 全选
    checkAllItem() {
      if (this.files.length == 0) {
        this.$message({ message: '当前没有任何文件，请先进行文件上传', type: 'info' })
        return
      }
      this.checkAll = !this.checkAll
    },
    async getoutGroup() {
      if (this.isGroupowner) {
        this.$message({ message: '由于您是群主，退群前需将该群转让', type: 'info' })
        return
      }
      let res = await leaveGroup(this.groupId)
      if (res.code == 200) {
        this.$message.success('退出成功')
        this.getGroupList()
      }
    },
    getchecklist(data) {
      this.checkList = data.arr
    },
    nextInto(data) {
      this.pageNum = 1
      this.pageSize = 100
      this.total = 0
      this.checkList = []
      this.checkAll = false
      this.getFilesList(data.id, this.groupId)
    },
    brandClick(parentId, index) {
      this.pageNum = 1
      this.getFilesList(parentId, this.groupId)
      this.removePath(index)
      // this.brandIndex = index
    },
    searchBand() {
      this.search_text = ''
      this.pageNum = 1
      this.getFilesList(0, this.groupId)
    },
    getEditFile(data) {
      this.isEdit = data.isEdit
    },
    // 新建文件夹
    async addFiles() {
      if (this.pathArr.length == 10) {
        this.$message.error('文件夹层级不能超过10层')
        return
      }
      if (this.isEdit) {
        this.isEdit = false
        return
      }
      this.isEdit = true
      let arr = JSON.parse(JSON.stringify(this.files))
      arr = arr.filter(item => {
        return item.fileName.includes('新建文件夹')
      })
      let item = {
        fileName: '新建文件夹',
        isDir: 1,
        reSetName: true,
        checked: false
      }
      this.files.unshift(item)

    },
    // 获取群组
    async getGroupList() {
      let res = await getmyGroup()
      this.loading = false
      if (res.code == 200) {
        this.schoolGroupList = res.data.schoolGroupList
        this.branchGroupList = res.data.branchGroupList
        this.myGroupList = res.data.myGroupList
        this.disciplineGroupList = res.data.disciplineGroupList
      }
    },
    // 获取群身份
    async getRoleInfo() {
      let res = await getGroupUserInfo({ groupId: this.groupId })
      if (res.code == 200) {
        this.groupInfo = res.data
        this.isAdmin = this.groupInfo.userType === 1
        this.isGroupowner = this.groupInfo.userType == 2
        this.isInvite = this.groupInfo.isAllowInvite
      }
    },
    // 群详情
    async getGroupDetailMsg() {
      let res = await getGroupDetail({ groupId: this.groupId })
      if (res.code == 200) {
        this.groupDetailMsg = res.data
        this.groupDetailMsg.storageSize = this.groupDetailMsg.storageSize ? this.convertBytes(this.groupDetailMsg.storageSize) : '0KB'
      }
    },
    // 获取搜索接口
    async getSeaGroupList() {
      let res = await getGroupList({ groupName: this.sea_GroupName })
      if (res.code == 200) {
        this.groupList = res.data
      }
    },
    // 文件搜索
    async searchFiles() {
      if (this.search_text !== '') {
        let res = await SearchGroupFileList({
          fileName: this.search_text, groupId: this.groupId, sortType: this.sortType,
          orderType: this.orderType
        })
        if (res.code == 200) {
          console.log(res.data)
          this.files = res.rows
        }
      } else {
        this.pageNum = 1
        this.getFilesList(0, this.groupId)
      }
      this.clearPathArr()
    },
    // 查询文件列表
    async getFilesList(parentId, groupId) {
      if (this.pageNum == 1) {
        this.isloading = true
      }
      let res = await getGroupFileList({
        groupId: groupId, fileType: 0, parentId: parentId, sortType: this.sortType,
        orderType: this.orderType, pageNum: this.pageNum, pageSize: this.pageSize
      })
      if (res.code == 200) {
        this.total = res.total
        if (this.pageNum == 1) {
          this.files = res.rows
        } else {
          this.files.push(...res.rows)
        }

      }
      this.isloading = false
      this.getGroupList()
    },
    // 批量删除
    deleteByID() {
      this.$confirm(`确定删除选择文件吗？`, '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async() => {
        let arr = []
        this.checkList.forEach(e => {
          arr.push(e.id)
        })
        let res = await GroupbatchDeleteFile({ groupId: this.groupId, ids: arr.join(',') })
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getFilesList(this.pathArr[this.pathArr.length - 1].id, this.groupId)
          this.checkAll = false
        }

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 复制
    handelCopy(command) {
      let arr = []
      let namearr = []
      this.checkList.forEach(e => {
        arr.push(e.id)
        namearr.push(e.fileName)
      })
      this.$refs.moveDialog.show('copy', arr, namearr, command.map, this.groupId)
    },
    // 移动复制
    handelMove(type) {
      let arr = []
      let namearr = []
      this.checkList.forEach(e => {
        arr.push(e.id)
        namearr.push(e.fileName)
      })
      this.$refs.moveDialog.show(type, arr, namearr, 1, this.groupId)
    },
    uploadGroupFile(command) {
      switch (command.map) {
        case 1:
          this.uploadFilesopen()
          break
        case 2:
          this.uploadFromLibrary(this.groupId)
          break
      }
    },
    // 打开上传页面
    uploadFilesopen() {
      this.$refs.uploadInput.clickInput()
    },
    uploadFromLibrary(groupId) {
      this.$refs.uploadfromlibrary.show(groupId)
    },
    // 转让
    turnGroup() {
      this.$refs.transferGroup.show(this.groupId, this.activeInfo.groupName, this.activeInfo.groupMasterId)
    }

  }
}
</script>


<style scoped lang="scss">
::v-deep .el-dropdown {
  font-size: 12px !important;
  font-weight: 500;
}

::v-deep .el-tree-node__content {
  height: 50px;
}

::v-deep .search_bar .el-input--medium .el-input__inner {
  border-radius: 18px;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;

  .nav_l {
    width: 246px;
    height: calc(100vh - 60px);
    background-color: #ffffff;
    border-right: 1px solid #dddddd;
    max-width: 246px;
    min-width: 200px;
    position: relative;

    .custom_tree_node {
      display: flex;
      align-items: center;

      .user_avatar {
        width: 40px;
        height: 40px;
        overflow: hidden;
        margin-right: 10px;
        flex-shrink: 0;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .groupLabel {
        flex-shrink: 0;
        width: calc(200px - 80px);
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .search_bar {
      padding: 5px 10px;
      box-sizing: border-box;
      margin-bottom: 10px;
    }

    .groupList {
      height: calc(100% - 95px);
      overflow: auto;

      .grouptitle {
        background-color: rgba(40, 178, 139, 0.3);
        font-size: 14px;
        font-weight: 400;
        line-height: 26px;
        color: rgba(40, 178, 139, 1);
        text-align: left;
        height: 26px;
        padding-left: 8px;
        box-sizing: border-box;
      }

      .group_item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;

        .item_basic {
          display: flex;
          align-items: center;
          font-size: 12px;

          .item_img {
            width: 29px;
            height: 29px;
            border-radius: 50%;
            margin-right: 4px;

            img {
              width: 29px;
              height: 29px;
              border-radius: 50%;
            }
          }

          .groupMsg {
            display: flex;
            align-items: center;

            .groupName {
              display: inline-block;
              width: 80px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              vertical-align: middle;
            }
          }

        }

        .msgNum {
          width: 14px;
          height: 14px;
          opacity: 1;
          background: rgba(212, 48, 48, 1);
          color: #ffffff;
          font-size: 12px;
          line-height: 14px;
          text-align: center;
          border-radius: 50%;
        }
      }

      .active {
        background-color: #eaf5f3;
      }
    }


    .addBtns {
      width: 100%;
      position: absolute;
      bottom: 1px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(40, 178, 139, 1);
      color: #ffffff;

      div:first-child {
        height: 16px;
        margin-right: 5px;

        img {
          width: 16px;
          height: 16px;
        }
      }

      div:last-child {
        height: 32px;
        line-height: 32px;
        text-align: center;
        font-size: 12px;
      }

    }
  }

  .content_r {
    width: calc(100% - 60px);
    height: calc(100vh - 60px);
    background-color: #ffffff;
    position: relative;
    display: flex;
    flex-direction: column;

    .content_top {
      width: 100%;

      .top_one {
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #dddddd;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
        box-sizing: border-box;

        ::v-deep .el-input--prefix .el-input__inner {
          height: 32px;
          border-radius: 40px;
          background: rgba(229, 229, 229, 0.5);
          border: 1px solid rgba(229, 229, 229, 0.5);
        }

        div:first-child {
          display: flex;
          align-items: center;

          .uploadBtn {
            height: 28.5px;
            line-height: 28.5px;
            font-size: 12px;
            border: 1px solid rgba(85, 224, 195, 1);
            padding: 0 10px;
            border-radius: 14px;
            margin-right: 10px;
            background: linear-gradient(226.85deg, rgba(85, 224, 195, 1) 0.04%, rgba(77, 224, 179, 1) 100%);
            color: #ffffff;
          }

          ::v-deep .el-dropdown-link.el-dropdown-selfdefine {
            color: #ffffff !important;
          }

        }

        ::v-deep .el-button {
          border: 1px solid rgba(85, 224, 195, 1) !important;
          background: linear-gradient(226.85deg, rgba(85, 224, 195, 1) 0.04%, rgba(77, 224, 179, 1) 100%) !important;
          color: #ffffff !important;
        }
      }

      .top_two {
        width: 100%;
        height: 40px;
        border-bottom: 1px solid #dddddd;
        display: flex;
        align-items: center;

        div:last-child {
          padding: 0 15px;
          box-sizing: border-box;
          font-size: 12px;
        }
      }

      .top_three {
        width: 100%;
        height: 40px;
        border-bottom: 1px solid #dddddd;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
        box-sizing: border-box;

        ::v-deep .el-dropdown {
          margin: 0 10px !important;
        }

        div:first-child {
          display: flex;
          align-items: center;

          .uploadBtn {
            height: 28px;
            line-height: 28px;
            font-size: 12px;
            border: 1px solid #dddddd;
            padding: 0 10px;
            border-radius: 3px;
            margin-right: 10px;
            margin-left: 10px;
          }
        }

        .iconBtn {
          display: flex;
          align-items: center;
          font-size: 14px;

          .filterIcon {
            width: 11px;
            height: 10px;
          }

          .refreshList {
            color: rgba(40, 178, 139, 1);
          }
        }

      }
    }

    .filecontnet {
      overflow: hidden;
      padding-bottom: 35px;
      box-sizing: border-box;
      flex: 1;
      height: 100%;
      position: relative;

      .empty {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }

    .content_footer {
      height: 32px;
      padding: 0 15px;
      box-sizing: border-box;
      border-top: 1px solid #dddddd;
      font-size: 12px;
      position: absolute;
      bottom: 1px;
      left: 0;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .getOutgroup {
        width: 68px;
        height: 20px;
        border-radius: 4px;
        background: rgba(255, 87, 51, 1);
        color: #ffffff;
        font-size: 12px;
        line-height: 20px;
        text-align: center;
      }

      .footer_left {
        margin-right: 60px;
      }

      .check_num {
        color: rgba(85, 224, 195, 1);
      }
    }
  }
}

.uploadFile {
  display: none;
}
</style>
